<!--
 * @Description: 
 * @Date: 2025-07-31 09:50:30
 * @LastEditTime: 2025-08-18 17:26:36
-->
<template>
  <van-nav-bar title="体检预约" style="background: #3784FA"></van-nav-bar>
  <div class="bg-#F5F6FA w-100% ">
    <div class="home-header"></div>
    <div class="home-info w-100%">
      <div class="user-info" style="display: flex; align-items: center;width: 100%;">
        <img src="../assets/img/manA.png" class="mr-10px w-70px h-70px" />
        <div class="flex flex-col items-start flex-1">
          <div class="w-100% flex">
            <span class="color-#fff font-bold text-22px">姓名：</span>
            <span class="flex-1 text-left color-#fff font-bold text-20px  left-wrap">{{ userInfo.realName }}</span>
          </div>
          <div>
            <span class="color-#fff font-bold text-14px">手机号：</span>
            <span class="color-#fff font-bold text-14px overflow-hidden">{{ userInfo.phone }}</span>
          </div>
          <div>
            <span class="color-#fff font-bold text-14px">是否预约：</span>
            <span class="color-#fff font-bold text-14px">
              <van-tag size="medium" color="tarn" type="danger" v-if="userInfo.issubmit == 0">未预约</van-tag>
              <van-tag size="medium" type="success" v-else>已预约</van-tag>
            </span>
          </div>
        </div>
      </div>
      <div class="grid gap-10px mt-20px w-100%" style="grid-template-columns: 1fr 1fr;">
        <div v-for="item in menus" :id="item.id"
          class=" bg-#fff p-10px overflow-hidden h-100px border-rd-20px gap-10px flex flex-col  gap-15px items-center justify-center">
          <img :src="item.img" class="w-35px h-35px" />
          <div class="text-15px w-100%  left-wrap text-center font-bold">
            {{ item.label }}：{{ item.value }}
          </div>
        </div>
      </div>
      <div class="grid gap-10px mt-20px w-100%" style="grid-template-columns: 1fr">
        <div v-for="item in hospitals" class=" bg-#fff p-20px flex flex-col gap-20px  overflow-hidden box-border">
          <div class="flex items-center gap-10px">
            <img src="../assets/img/hospital.png" class="w-60px h-60px" /></img>
            <div class="flex flex-col items-start flex-1 overflow-hidden">
              <span class="text-26px color-#244A5C font-bold">{{ item.title }}</span>
              <span class="text-12px w-100% left-wrap text-left">{{ item.ETitle }}</span>
            </div>
          </div>
          <div class="flex items-center justify-between gap-10px">
            <div class="flex-1 flex">
              <span >地址：</span>
              <span class="text-left flex-1 warp2">{{ item.address }}</span>
            </div>
            <div class="">

              <div :id="item.id" class="bg-#3784FA font-bold  text-16px px-20px py-5px color-#fff border-rd-20px"
                @click="handleSkip(item.hId, item.type)">查看套餐</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" @click="goToPage('main')">首页</van-tabbar-item>
    <van-tabbar-item icon="setting-o" @click="goToPage('settings')">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { useRouter } from "vue-router"
import { ref, onMounted, nextTick } from "vue"
import menu1 from "../assets/img/menu1.png"
import menu2 from "../assets/img/menu2.png"
import menu3 from "../assets/img/menu3.png"
import menu4 from "../assets/img/menu4.png"
import IntroJs from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
import { getUserInfo, getHospitals, updateUserInfo } from "../api/user"
import store from '../store'

// import 'intro.js/themes/introjs-modern.css' // introjs主题
// introjs还提供了多种主题，可以通过以下方式引入

const amount = ref()
const router = useRouter()
const userInfo = ref({})
const issubmit = ref(0)
const menus = ref([
  {
    label: "性别",
    img: menu1,
    value: "男",
    id: 'menu1'
  },
  {
    label: "年龄",
    img: menu2,
    value: 18,
    id: 'menu2'
  },
  {
    label: "部门",
    img: menu3,
    value: "办公室（党委办公室|乡村振兴办公室）",
    id: 'menu3'
  },
  {
    label: "体检套餐",
    img: menu4,
    value: "980",
    id: 'menu4'
  }
])
const hospitals = ref([
  {
    title: "延安市人民医院",
    ETitle: "Yan'an People's Hospital",
    address: "延安市七里铺",
    type: 0,
    hId: "",
    id: "hospitals1"
  },
  {
    title: "延安市中医医院",
    ETitle: "Yan'an Traditional Chinese Medicine Hospital",
    address: "延安市新区",
    type: 1,
    hId: "",
    id: "hospitals2"
  }
])
onMounted(() => {
  nextTick(() => {
    getUserInfo().then(res => {
      if (res.data.code == 200) {
        userInfo.value = res.data.data
        menus.value[0].value = userInfo.value.gender
        menus.value[1].value = userInfo.value.age
        menus.value[2].value = userInfo.value.deptName
        menus.value[3].value = userInfo.value.amount
        amount.value = userInfo.value.amount
        issubmit.value = userInfo.value.issubmit
        if (!userInfo.value.isolduser) {
          initPageIntro()
        }
      }
    })
    getHospitals().then(res => {
      if (res.data.code == 200) {
        res.data.data.list.forEach(item => {
          hospitals.value.forEach(target => {
            if (target.title == item.hospitalName) {
              target.hId = item.hospitalId
              target.address = item.address
            }
          })
        })
      }
    })

  })
})
function handleSkip(id, type) {
  router.push(`/setMeal?type=${type}&id=${id}&amount=${amount.value}&issubmit=${issubmit.value}`)
}
const initPageIntro = () => {
  // 引导图
  const allSteps = [
    {
      element: '#menu4', //这是添加引导的元素id
      intro: '首先确认好自己体检套餐的金额!', //这是引导提示内容
      position: 'left' //这是引导位置
    },
    {
      element: '#hospitals1', //这是添加引导的元素id
      intro: '选择医院与自己金额相同的套餐!', //这是引导提示内容
      position: 'left' //这是引导位置
    },
  ]

  const curIntro = IntroJs()
  curIntro.setOptions({
    nextLabel: '下一步',
    /* 上一步按钮的显示名称 */
    prevLabel: '上一步',
    /* 跳过按钮的显示名称 */
    skipLabel: '跳过',
    /* 结束按钮的显示名称 */
    doneLabel: '完成',
    /* 引导说明框相对高亮说明区域的位置 */
    tooltipPosition: 'bottom',
    /* 引导说明文本框的样式 */
    tooltipClass: '',
    stepNumbersOfLabel: "/",
    /* 说明高亮区域的样式 */
    highlightClass: '',
    /* 是否使用键盘Esc退出 */
    exitOnEsc: true,
    /* 是否允许点击空白处退出 */
    exitOnOverlayClick: false,
    /* 是否显示说明的数据步骤*/
    showStepNumbers: true,
    /* 是否允许键盘来操作 */
    keyboardNavigation: true,
    /* 是否按键来操作 */
    showButtons: true,
    /* 是否使用点点点显示进度 */
    showBullets: false,
    /* 是否显示进度条 */
    showProgress: true,
    /* 是否滑动到高亮的区域 */
    scrollToElement: true,
    /* 遮罩层的透明度 */
    overlayOpacity: 0.8,
    /* 当位置选择自动的时候，位置排列的优先级 */
    positionPrecedence: ["left", "top", "right", "bottom"],
    /* 是否禁止与元素的相互关联 */
    disableInteraction: false,
    /* 默认提示位置 */
    hintPosition: 'top-middle',
    /* 默认提示内容 */
    hintButtonLabel: 'Got it',
    steps: allSteps,

  })
  curIntro.oncomplete(() => {
    // 点击结束按钮后执行的事件
    updateUserInfo({ id: userInfo.value.id, isolduser: 1 })
  })


  curIntro.start()
}
const goToPage = (name) => {
  switch (name) {
    case "main":
      router.push("/main");
      break;
    case "settings":
      router.push(`/settings?issubmit=${issubmit.value}`);
      break;
  }
};
</script>

<style>
.van-nav-bar__title {
  color: #fff;
}

.van-hairline--bottom::after {
  border-bottom-width: 0px !important;
}

:deep(.van-hairline--bottom::after) {
  border-color: #3784FA;
  border-bottom-width: 0px !important;
}


.home-header {
  width: 100%;
  height: 180px;
  background: #3784FA;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  grid-template-columns: 1fr 1fr;
}

.home-info {
  width: 88%;
  margin: 0 auto;
  transform: translateY(-140px);
  gap: 20px;


}

.left-wrap {
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
  /* 超出部分显示为省略号 */
}

.warp2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.introjs-tooltip .introjs-tooltip-header {
  display: none !important;
}

.introjs-tooltip .introjs-helperNumberLayer {
  position: absolute;
  font-size: 20px;
  color: #000;
  bottom: 3px;
  right: 100px;
}

.introjs-tooltip .introjs-button {
  background: #3784FA;
  color: #fff;
  text-shadow: none !important;
  border: none !important
}

.introjs-tooltipbuttons::after {
  display: none !important;
}

.introjs-button:focus {
  text-shadow: none !important;
  border: none !important;
  box-shadow: none !important;
}

.introjs-tooltipbuttons {
  display: flex;
  justify-content: end;
  border: none
}

.introjs-prevbutton {
  display: none !important;
}

.introjs-tooltiptext {
  font-size: 18px;
  font-weight: bold;
  padding: 15px;

}
</style>
